<template>
    <div class="swiper-container"  @mouseenter="ShowSwiperBtn" @mouseleave="HideSwiperBtn">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in imgs" :key="i"><img :src="item.pic"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev" v-show="putHand === true"></div>
        <div class="swiper-button-next" v-show="putHand === true"></div>
       
        
        <!-- 如果需要滚动条
        <div class="swiper-scrollbar"></div> -->
    </div>
</template>

<script>
import axios from 'axios'// eslint-disable-line no-unused-vars
import Swiper from 'swiper'
import { getBanners } from "@/api/index";

import 'swiper/css/swiper.css'


export default {
    name: 'swiperCom',

    data() {
        return {
            imgs:[],
            putHand:false
        };
    },

    async mounted(){
        var mySwiper = new Swiper('.swiper-container', {  // eslint-disable-line no-unused-vars
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            
            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },   
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },   
        });

        let res = await getBanners(1)
        this.imgs = res.data.banners
    },

    methods: {
        ShowSwiperBtn(){
            this.putHand = true
        },
        HideSwiperBtn(){
            this.putHand = false
        }
    },
};
</script>

<style lang="less" scoped>
.swiper-container{
  width: 6.8rem;
  height: 2.8rem;
  border-radius: 0.3rem;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
}
</style>